import { LayoutProps } from "@/components/Configuration/FileProps/LayoutProps.tsx";
import React from "react";
import { LayerStructure } from "@/components/Configuration/FileProps/LayerStructure.tsx";
import { PenMainProps } from "@/types";
import { Tabs } from "antd";
import { Alignment } from "@/components/Configuration/MultipleProps/Alignment.tsx";
import { ScrollChildren } from "@/components/Configuration/ScrollChildren.tsx";

function MultipleProps(props: PenMainProps) {
  return (
    <>
      <Tabs
        animated
        size={"small"}
        centered
        onChange={(key) => {
          sessionStorage.setItem("MultipleProps", key);
        }}
        defaultActiveKey={
          sessionStorage.getItem("MultipleProps") || "appearance"
        }
        items={[
          {
            key: "appearance",
            label: "外观",
            children: (
              <ScrollChildren>
                <Alignment {...props} />
              </ScrollChildren>
            ),
          },
          {
            key: "LayoutProps",
            label: "布局",
            children: (
              <ScrollChildren>
                <LayoutProps />
              </ScrollChildren>
            ),
          },
          {
            key: "LayerStructure",
            label: "结构",
            children: (
              <ScrollChildren>
                <LayerStructure {...props} />
              </ScrollChildren>
            ),
          },
        ]}
      />
    </>
  );
}
export default React.memo(MultipleProps);
